<template>
    <div>
        <div class="box">
            <el-card class="card">
                <el-row class="card-row">
                    <el-col :span="12">
                        <el-card class="box-card centered-card red" shadow="hover" :show-close="false">
                            <div>
                                注册时间:<el-tag type="success">{{ user.createTime }}</el-tag>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="box-card centered-card red" shadow="hover" :show-close="false">
                            <div>
                                账号状态:<el-tag :type="user.status == 1 ? 'success' : 'danger'">{{ user.status == 1 ? '正常'
                                    : '注销'
                                }}</el-tag>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="form">
                <el-form :model="form" ref="form" label-width="100px" :rules="rules" style="margin-top: 50px;;"
                    enctype="multipart/form-data">

                    <el-form-item label="用户账号" prop="name">
                        <el-input v-model="form.name" placeholder="请输入用户账号" style="width: 800px;"
                            @input="form.update = 1"></el-input>
                    </el-form-item>
                    <el-form-item label="用户姓名" prop="username">
                        <el-input v-model="form.username" placeholder="请输入用户姓名" style="width: 800px;"
                            @input="form.update = 1"></el-input>
                    </el-form-item>
                    <!-- 手机号码 -->
                    <el-form-item label="手机号码" prop="telephone">
                        <el-input v-model="form.telephone" placeholder="请输入手机号码" style="width: 800px;"
                            @input="form.update = 1"></el-input>
                    </el-form-item>
                    <el-form-item label="用户邮箱" prop="email">
                        <el-input v-model="form.email" placeholder="请输入用户邮箱" style="width: 800px;"
                            @input="form.update = 1"></el-input>
                    </el-form-item>

                    <!-- 用户年龄 -->
                    <el-form-item label="用户年龄" prop="age">
                        <el-input-number v-model="form.age" type="number" @input="form.update = 1" :min="18" :max="50"
                            placeholder="请输入用户年龄" style="width: 800px;"></el-input-number>
                    </el-form-item>
                    <!-- 用户性别 -->
                    <el-form-item label="用户性别" prop="sex">
                        <el-select v-model="form.sex" placeholder="请选择性别" style="width: 800px;"
                            @change="form.update = 1">
                            <el-option v-for="item in sexData" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" style="width:800px;" v-if="form.update == 1"
                            @click="doMod()">保存修改</el-button>
                    </el-form-item>

                </el-form>

            </el-card>
        </div>
    </div>
</template>
<script>
export default {

    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Setting',
    data() {
        return {
            user: JSON.parse(localStorage.getItem('CurUser')),
            timer: null,
            form: {
                name: '',
                username: '',
                email: '',
                telephone: '',
                sex: '1',
                age: '',
                update: 0
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户账号', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到8 个字符', trigger: 'blur' }
                ],

                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                age: [
                    { required: true, message: '请选择年龄', trigger: 'change' }
                ],

                telephone: [
                    { required: true, message: '请填写手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '请填写11位手机号', trigger: 'blur' },
                    { pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(18[0-9])|166|198|199|(147))\d{8}$/, message: "手机号码不正确" }
                ],
                email: [
                    { required: true, message: '请填写邮箱', trigger: 'blur' },
                    { type: 'email', message: '请填写正确的邮箱', trigger: 'blur' }
                ],
            },
            sexData: [
                { label: '男', value: 1 },
                { label: '女', value: 0 }
            ],
        }
    }, methods: {
        formatDate(data) {
            if (data == null)
                return null
            let date = new Date(data)
            return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
        },
        init() {
            this.form = this.user
            this.getUserById()
        },
        getUserById() {
            this.$axios.get('/user/info/' + this.user.id)

                .then(res => {
                    if (res.code == 200) {
                        this.user = res.data
                        this.$EventBus.$emit('update-user')
                    }
                })
        },
        doMod() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$axios.post('/user/update', this.form)
                        .then(res => {
                           
                            if (res.code == 200) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                })
                                this.form.update = 0
                                this.getUserById()
                            } else {
                                this.$message({
                                    message: '修改失败',
                                    type: 'error'
                                })
                            }
                        })
                } else {
                    this.$message({
                        message: '校验失败',
                        type: 'warning'
                    })
                }
            })

        },
    }, mounted() {
        this.init()
        this.timer = setInterval(() => {
            if (this.user.update == 0)
                this.init()
        }, 2000)
    },
    destroyed() {
        clearInterval(this.timer)
    },
}
</script>
<style scoped>
.box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card {
    background-color: blanchedalmond;
    width: 100%;
}

.form {
    background-color: burlywood;
    width: 100%;
}
</style>